<template>
    <div class="contaLayout">
        <div class="topBox" v-hiddentop>
            <top-box></top-box>
        </div>
        <div class="swiperBox">
            <swiper-box :data="swiperx"></swiper-box>
        </div>
        <div class="kindsBox">
            <kinds-box :data="kindsList"></kinds-box>
        </div>
        <div class="nowChaseBox">
            <now-chase-box  :data="nowChase"></now-chase-box>
        </div>
        <div class="newFJBox">
            <new-fj-box :data="newFJ"></new-fj-box>
        </div>
        <div class="nowChaseBox">
            <fj-hot-play-box :data="FJhotPlay"></fj-hot-play-box>
        </div>
        <div class="nowChaseBox">
            <info-and-spr-box title="动画资讯" lable="查看全部" :list="list.comicInfoList"></info-and-spr-box>
        </div>
        <div class="nowChaseBox">
            <info-and-spr-box title="官方延伸" lable="查看全部" :list="list.extendtList"></info-and-spr-box>
        </div>
        <div class="nowChaseBox">
            <new-hot-recom-box :data="newRecom"></new-hot-recom-box>
        </div>
        <more-box title="猜你喜欢" :list="list.moreList" :cardList="list.moreCardList"></more-box>
        <div class="footer" v-loadata>
            <footer-Box></footer-Box>
        </div>

        <Transition name="showLoginPopup">
            <div v-if="store.state.isShowLoginPopup" class="showBox">
                <login-popup></login-popup>
            </div>
        </Transition>
    </div>
</template>

<script lang="ts" setup>
import { swiperBox,topBox,kindsBox,nowChaseBox,newFjBox,infoAndSprBox,fjHotPlayBox,newHotRecomBox,moreBox,loginPopup,footerBox } from './index' 
import { swiperx,kindsList,nowChase,newFJ,FJhotPlay,newRecom } from '@/JSON/FJjson'
import { onBeforeMount,reactive } from 'vue'
import { get } from '@/http/axios'
import { useStore } from 'vuex'

onBeforeMount(() => {
    getComicInfo()
    getExtendt()
    getMore()

})
let list = reactive({
    comicInfoList:[],
    extendtList:[],
    moreList:[],
    moreCardList:[]
})
const store = useStore()

const vLoadata = {
    mounted: (el:HTMLElement) => {    
        const observer = new IntersectionObserver((enr)=>{
            if (enr[0].intersectionRatio > 0){
                let timer = setTimeout(() => {
                    clearTimeout(timer)
                    getMore()
                },500)

            }
        })
        observer.observe(el);
    }
}

function getComicInfo(){
    get('/x/web-interface/dynamic/region?ps=18&rid=51')
    .then(res => {
        list.comicInfoList= res.data.archives
        console.log('动画资讯信息',res);
        
    }).catch(res => {
        alert('动画资讯信息信息加载错误')
    })
}
function getExtendt(){
    get('/x/web-interface/dynamic/region?ps=18&rid=152')
    .then(res => {
        list.extendtList = res.data.archives
        console.log('官方延伸信息',res);
    }).catch(res => {
        alert('官方延伸信息加载错误')
    })
}
let num = 29
function getMore(){
    get('/pgc/page/web/v3/feed?name=anime&coursor='+ num)
    .then(res => {
        console.log('更多',res);
        list.moreList = [...list.moreList,...res.data.items[0].sub_items]
        if (res.data.items[1]){
            list.moreCardList = [...list.moreCardList,...res.data.items[1].sub_items]
        }
        num += 29
    })
    .catch(res => {
        alert('更多信息加载失败')
    })
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/LoginPopup.scss);
@media  screen and (min-width: 0) and (max-width: 1600px){
    .kindsBox{
        margin-top: 490px;
    }
}
@media  screen and (min-width: 1600px) and (max-width: 2400px){
    .kindsBox{
        margin-top: 550px;
    }
}
*{
    padding: 0;
    margin: 0;
}
.contaLayout{
    min-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    z-index: 99;
}
.topBox{
    width: 100%;
    position: absolute;
    top: 0;
}
.swiperBox{
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    z-index: -1;
    top: 0;
}
.kindsBox{
    width: 90%;
    display: flex;
    justify-content: center;
}
.nowChaseBox{
    width: 90%;
    display: flex;
    justify-content: center;
}
.newFJBox{
    width: 100%;
}
.footer{
    width: 100%;
}
</style>